<template>
    <view>
        <uni-notice-bar scrollable="true" single="true" text="请业主们及时缴纳费用，否则无法享受物业服务"></uni-notice-bar>
        <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="0">
                <uni-forms-item class="searchpay" @tap="tosearchpay()">
					<span class="iconfont icon-wenjian"></span><span style="color:#51c4d3">查询缴费</span>
				</uni-forms-item>
                <uni-forms-item required label="缴费项目">
                    <picker @change="paymentType" :range="paymentTypeArray" class="pick">
                        <label class="content">{{ paymentTypeArrayType }}</label>
                    </picker> 
                </uni-forms-item>
                <uni-forms-item label="支付方式">
                    <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
                </uni-forms-item> 
                <uni-forms-item required label="业主姓名" name="name">
                    <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item name="room" required label="房号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.room" placeholder="请输入地址"></uni-easyinput>
				</uni-forms-item>
            </uni-group>
            <view>
                <button class="btn" @click="submitForm('form')"><span style="color:white">提交订单</span></button>
            </view>
        </uni-forms>
    </view>
</template>
<script>
import { uniNoticeBar } from "@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue";
import { uniForms } from "@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue";
import { uniFormsItem } from "@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue";
import { uniEasyinput } from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue";
import { uniDataCheckbox } from "@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue";
import { uniGroup } from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue';
export default {
    data() {
        return {
            paymentTypeArray:['电费:1.45元/度','水费:1.45元/m³','煤气费:3.77元/m³','维修费:100元/次','物业费:200元/月','停车费:100元/月'],
            paymentTypeIndex: 0,
            paymentTypeArrayType:'请选择需要缴费的项目',
            value: 0,
            formData:{
                room:'',
                name: '',
            },
             rules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '请输入用户名'
					},
					{
						minLength: 3,
						maxLength: 15,
						errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
					}]
				},
				room: {
					rules: [{
						required: true,
						errorMessage: '请输入维修地址'
					}]
				},
             },
            range: [
                {
                    "value": 0,
                    "text": "微信支付"
                },
                {
                    "value": 1,
                    "text": "支付宝支付"
                },
            ],
        }
    } ,
    components: {
        uniEasyinput,
        uniNoticeBar,
        uniForms,
        uniFormsItem,
        uniGroup,
        uniDataCheckbox
    },
    methods: {
        tosearchpay() {
            uni.navigateTo({
				url: "./searchpay",
			});
        },
        change(e) {
            console.log('e',e);
        },
        paymentType(e) {
            this.paymentTypeIndex = e.target.value;
            this.paymentTypeArrayType=this.paymentTypeArray[this.paymentTypeIndex]
        },
        submitForm(form) {
			this.$refs[form]
            .submit()
            .then(res => {
				console.log('表单的值：', res)
					uni.showToast({
						title: '验证成功'
					})
                    uni.navigateTo({
                        url: "./Wechatpay",
                    });
			})
			.catch(errors => {
				console.error('验证失败：', errors)
			})
		},
    }
}
</script>

<style>
/* .form{
    width: 350px;
}
.content {
    margin-left: 15px;
} */
.icon-wenjian{
	width: 30px;
}
.searchpay {
	font-size: 15px;
	margin-top: -18px;
}
.btn {
    width: 250px; 
    background-color: #51c4d3;
}
</style>